<template>
  <a-tabs defaultActiveKey="1">
    <a-tab-pane tab="节点" key="1">
      <a-row>
        <a-col :span="8">边框颜色</a-col>
        <a-col :span="14">
          <a-input
            type="color"
            v-model:value="nodeAttr.nodeStroke"
            style="width: 100%"
          />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">边框宽度</a-col>
        <a-col :span="12">
          <a-slider
            :min="1"
            :max="5"
            :step="1"
            v-model:value="nodeAttr.nodeStrokeWidth"
          />
        </a-col>
        <a-col :span="2">
          <div class="result">{{ nodeAttr.nodeStrokeWidth }}</div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">填充颜色</a-col>
        <a-col :span="14">
          <a-input
            type="color"
            v-model:value="nodeAttr.nodeFill"
            style="width: 100%"
          />
        </a-col>
      </a-row>
    </a-tab-pane>
    <a-tab-pane tab="文本" key="2">
      <a-row>
        <a-col :span="8">标题</a-col>
        <a-col :span="14">
          <a-input v-model:value="nodeAttr.nodeText" style="width: 100%" />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">字体大小</a-col>
        <a-col :span="12">
          <a-slider
            :min="8"
            :max="16"
            :step="1"
            v-model:value="nodeAttr.nodeFontSize"
          />
        </a-col>
        <a-col :span="2">
          <div class="result">{{ nodeAttr.nodeFontSize }}</div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">字体颜色</a-col>
        <a-col :span="14">
          <a-input
            type="color"
            v-model:value="nodeAttr.nodeColor"
            style="width: 100%"
          />
        </a-col>
      </a-row>
    </a-tab-pane>
    <a-tab-pane tab="属性" key="3">
      <a-row>
        <a-col :span="8">自定义属性</a-col>
        <a-col :span="14">
          <a-input v-model:value="nodeAttr.nodeUsers" style="width: 100%" />
        </a-col>
      </a-row>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts">
import { defineComponent, reactive, watch, toRefs, ref, nextTick } from 'vue'
import { FlowGraph } from '@/common/FlowGraph'
interface IFNodeAttr {
  nodeText: string
  nodeStroke: string
  nodeStrokeWidth: number
  nodeFill: string
  nodeFontSize: number
  nodeColor: string
  nodeUsers: string
}
export default defineComponent({
  name: 'ConfigNode',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const isByIdGetInfo = ref(false)
    const nodeAttr = reactive<IFNodeAttr>({
      nodeText: '',
      nodeStroke: '#5F95FF',
      nodeStrokeWidth: 1,
      nodeFill: '#ffffff',
      nodeFontSize: 12,
      nodeColor: '#080808',
      nodeUsers: ''
    })
    const { id } = toRefs(props)
    const getNode = (id: string) => {
      const cell = FlowGraph.graph.getCellById(id)
      if (!cell || !cell.isNode()) {
        return null
      }
      return cell
    }
    watch(nodeAttr, () => {
      // 如果是根据 id 获取详情引起的变化则不必触发后续操作
      if (isByIdGetInfo.value) return
      const cell = getNode(id.value)
      if (!cell) {
        return
      }
      cell.attr('body/stroke', nodeAttr.nodeStroke)
      cell.attr('body/strokeWidth', nodeAttr.nodeStrokeWidth)
      cell.attr('body/fill', nodeAttr.nodeFill)
      cell.attr('text/text', nodeAttr.nodeText)
      cell.attr('text/fontSize', nodeAttr.nodeFontSize)
      cell.attr('text/fill', nodeAttr.nodeColor)
      cell.attr('approve/users', nodeAttr.nodeUsers)
    })
    watch(id, () => {
      const cell = getNode(id.value)
      if (!cell) {
        return
      }
      isByIdGetInfo.value = true
      nodeAttr.nodeStroke = cell.attr('body/stroke')
      nodeAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
      nodeAttr.nodeFill = cell.attr('body/fill')
      nodeAttr.nodeText = cell.attr('text/text')
      nodeAttr.nodeFontSize = cell.attr('text/fontSize')
      nodeAttr.nodeColor = cell.attr('text/fill')
      nodeAttr.nodeUsers = cell.attr('approve/users')
      nextTick(() => {
        isByIdGetInfo.value = false
      })
    })
    return {
      nodeAttr
    }
  }
})
</script>

<style lang="less" scoped></style>
